{% block sw_first_run_wizard_modal %}
<sw-modal
    :title="title"
    :variant="variant"
    :closable="isClosable"
    class="sw-first-run-wizard-modal"
    @modal-close="closeModal"
>
    {% block sw_first_run_wizard_modal_content %}
    <div class="sw-first-run-wizard-modal-content">
        <sw-container
            :class="{'one': !showSteps, 'two': showSteps}"
            class="sw-first-run-wizard-modal-content__columns"
        >
            {% block sw_first_run_wizard_modal_content_steps %}
            <div
                v-if="showSteps"
                class="sw-first-run-wizard-modal-content__steps"
            >
                <sw-step-display
                    :item-index="stepIndex"
                    :item-variant="stepVariant"
                    :initial-item-variants="stepInitialItemVariants"
                >
                    <sw-step-item v-if="!extensionManagementDisabled">
                        {{ $tc('sw-first-run-wizard.stepItemTitle.dataImport') }}
                    </sw-step-item>
                    <sw-step-item>
                        {{ $tc('sw-first-run-wizard.stepItemTitle.defaults') }}
                    </sw-step-item>
                    <sw-step-item>
                        {{ $tc('sw-first-run-wizard.stepItemTitle.mailer') }}
                    </sw-step-item>
                    <sw-step-item v-if="!extensionManagementDisabled">
                        {{ $tc('sw-first-run-wizard.stepItemTitle.setupPaypal') }}
                    </sw-step-item>
                    <sw-step-item v-if="!extensionManagementDisabled">
                        {{ $tc('sw-first-run-wizard.stepItemTitle.plugins') }}
                    </sw-step-item>
                    <sw-step-item>
                        {{ $tc('sw-first-run-wizard.stepItemTitle.shopware') }}
                    </sw-step-item>
                    <sw-step-item v-if="!extensionManagementDisabled">
                        {{ $tc('sw-first-run-wizard.stepItemTitle.store') }}
                    </sw-step-item>
                </sw-step-display>
            </div>
            {% endblock %}

            {% block sw_first_run_wizard_modal_content_page %}
            <div class="sw-first-run-wizard-modal-content__page">
                <router-view
                    v-slot="{ Component }"
                >
                    <component
                        :is="Component"
                        v-if="Component"
                        class="sw-first-run-wizard-modal__component"
                        @buttons-update="updateButtons"
                        @frw-redirect="redirect"
                        @frw-set-title="setTitle"
                        @frw-finish="finishFRW"
                        @extension-activated="onExtensionActivated"
                    />
                </router-view>
            </div>
            {% endblock %}

            <sw-loader
                v-if="showLoader"
                class="sw-first-run-wizard-modal__loader"
            />
        </sw-container>
    </div>
    {% endblock %}

    {% block sw_first_run_wizard_modal_footer %}
    <template #modal-footer>
        <div class="sw-first-run-wizard-modal__footer">
            {% block sw_first_run_wizard_modal_footer_left %}
            <div class="footer-left">
                <mt-button
                    v-for="button in buttons.left"
                    :key="button.action"
                    :variant="button.variant"
                    :disabled="button.disabled"
                    size="small"
                    @click="onButtonClick(button.action)"
                >
                    {{ button.label }}
                </mt-button>
            </div>
            {% endblock %}

            {% block sw_first_run_wizard_modal_footer_right %}
            <div class="footer-right">
                <mt-button
                    v-for="button in buttons.right"
                    :key="button.action"
                    :variant="button.variant"
                    :disabled="button.disabled"
                    size="small"
                    @click="onButtonClick(button.action)"
                >
                    {{ button.label }}
                </mt-button>
            </div>
            {% endblock %}
        </div>
    </template>
    {% endblock %}
</sw-modal>
{% endblock %}
